<script setup>
import { computed, watchEffect } from 'vue'
import { routes } from '../router/index'
import { useQueryBreakpoints } from '../composables/query-breakpoints'
import xmxMenu from './components/xmx_menu.vue'
import xmxHeader from './components/xmx_header.vue'
import fullScreen from '@/components/fullScreen.vue'


import { useAppStore } from '@/store/app'
import { useUserStore } from '@/store/user'
import { useRoute } from 'vue-router'



const route = useRoute()

const { isMobile, isPad, isDesktop } = useQueryBreakpoints()
const userStore = useAppStore()
const userStore1 = useUserStore()


// userStore.getAppInfo()



const aliveList = computed(() => {
  const list = routes[0].children
  const k = []
  list.forEach((v) => {
    if (v.meta.keepAlive)
      k.push(v.name)
  })
  console.log(k)
  return k
})

watchEffect(() => {
  if (isPad.value) {
    userStore.pattern = 'Pad'
  }

  else if (isDesktop.value) {
    userStore.pattern = 'Web'
  }

  if (isMobile.value) {
    userStore.pattern = 'Mobile'
  }
})


</script>

<template>
  <fullScreen></fullScreen>
  <div class="flex xmx_content admin_box ">
    <xmxMenu class="xwxs:(hidden ) xwsm:(flex)"></xmxMenu>
    <!-- #f3f7f7; -->
    <main
      class="flex-1 rounded-[46px] h-[97.55%] my-auto mr-[12px] relative flex flex-col max-h-[97.55%] overflow-auto "
      style="background-color: #f3f7f7;width: calc(100% - 230px);">
      <xmxHeader></xmxHeader>
      <router-view v-slot="{ Component }">
        <transition name="fade">
          <keep-alive :max="10" :include="aliveList">
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    </main>
    <div>

    </div>
  </div>

  <n-back-top :right="userStore.pattern == 'Mobile' ? 10 : 100" bottom="80px">
    <svg class="w-[25px] h-[25px]" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 512 512">
      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
        d="M112 244l144-144l144 144"></path>
      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
        d="M256 120v292"></path>
    </svg>
  </n-back-top>
</template>

<style>
.body {
  font-family: PingFang SC;
  background: #fff;
}

.el-aside {
  transition: all 0.2s;
}

.fade-enter-from {
  opacity: 0;
}

.fade-enter-to {
  opacity: 1;
}

.fade-leave-from {
  opacity: 1;
}

.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-active {
  transition-delay: 0.3s;
}

.admin_box {
  background-image: url(../assets/home/bg.png);
  background-size: 100% 100%;
}
</style>
